import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import {
    WeaTable, WeaTableEditable, WeaTools, WeaDialog, WeaSearchGroup, WeaInput, WeaFormItem, WeaDropdown, WeaSelect, WeaDatePicker,
    WeaTransfer, WeaCheckbox, WeaBrowser, WeaLocaleProvider, WeaInputNumber
} from 'ecCom';
import { Button, Row, Menu, Switch, message, Radio } from "antd";

import './style/';

const RadioGroup = Radio.Group
const getLabel = WeaLocaleProvider.getLabel;

@inject("TaskElementStore")
@observer
class Setting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // title: getLabel(20885, "内容来源"),
            title: "",
            columns: [
                {
                    title: getLabel(508544, "标题"),
                    dataIndex: 'title',
                    key: 'title',
                    com: [
                        {
                            type: 'INPUT',
                            viewAttr: 1,
                            key: 'title',
                            width: 120
                        }
                    ]
                },
                {
                    title: getLabel(30585, "操作"),
                    dataIndex: 'operation',
                    key: 'operation',
                    com: [
                        {
                            type: 'CUSTOM',
                            viewAttr: 1,
                            key: 'operation',
                            width: 120,
                            render: (text, record, index, onEdit) => {
                                return (
                                    <span>
                                        <span id={`common-click-set-${index}`} className="common-click-workrelate" onClick={this.handleSetSpanClick}>{getLabel(30747, "设置")}</span>
                                        &nbsp;&nbsp;
                                        <span id={`common-click-othersave-${index}`} className="common-click-workrelate" onClick={this.handleOtherSaveSpanClick}>{getLabel(506965, "另存为")}</span>
                                    </span>
                                )
                            }
                        }
                    ]
                }
            ],
            tableDatas: [],
            dialogVisible: false,
            showTotalCount: 0,
            showSubordinateFilter: 0,
            currSettingItemData: Object.assign({}, toJS(this.props.TaskElementStore.defaultCurrSettingItemData)),
            letDialogVisiable: {},
            orderbyTransferDialogVisible: false,
            fieldshowTransferDialogVisible: false,
            searchItems: [],
            isshowstatus: true,
        };
        // 将当前组件实例传递到元素组件，以便元素组件获取到该组件
        props.getInstance && props.getInstance(this);
    }

    componentWillMount() {
        const { params = {}, TaskElementStore } = this.props;
        const { eid } = params;
        // 获取元素所配置的搜索项
        WeaTools.callApi('/api/workrelate/portal/element/getSearchItemInfo', 'POST', { eid, main_tablename: 'tm_taskcolumn_baseinfo' }).then((result) => {
            let searchItems = []
            for (let k in result) {
                searchItems.push(result[k])
            }

            this.setState({
                searchItems
            }, () => {
                // 获取元素设置项的保存值数据
                WeaTools.callApi('/api/workrelate/portal/element/getSettingData', 'GET', { eid }).then((result) => {
                    if (result) {
                        let tableDatas = [];
                        for (let k in result) {
                            const { tabseq } = result[k]
                            tableDatas.push(Object.assign({
                                id: tabseq,status:"0",
                            }, result[k]))
                        }

                        this.setState({
                            tableDatas
                        })
                    }
                });
            })
        })
    }

    componentDidMount() {

    }

    handleSetSpanClick = (e) => {
        let settingDataIndex = e.target.id.substring(e.target.id.lastIndexOf("-") + 1);
        let settingData = this.state.tableDatas[parseInt(settingDataIndex)];

        this.setState({
            dialogVisible: true,
            letDialogVisiable: {
                set: true
            },
            currSettingItemData: Object.assign({}, toJS(this.props.TaskElementStore.defaultCurrSettingItemData), settingData)
        });
    }

    handleOtherSaveSpanClick = (e) => {
        let settingDataIndex = e.target.id.substring(e.target.id.lastIndexOf("-") + 1);
        let settingData = this.state.tableDatas[parseInt(settingDataIndex)];

        this.setState({
            dialogVisible: true,
            letDialogVisiable: {
                othersave: true
            },
            currSettingItemData: Object.assign({}, toJS(this.props.TaskElementStore.defaultCurrSettingItemData), settingData)
        });
    }

    crossValidate = () => {
        const { currSettingItemData } = this.state
        if (!currSettingItemData.title || currSettingItemData.title == "") {
            message.warning(getLabel(15859, "必要信息不完整！"))
            return false
        }
        if (currSettingItemData.begindate && currSettingItemData.begindate1 && currSettingItemData.begindate > currSettingItemData.begindate1) {
            message.warning(getLabel(508668, '开始日期最小值不能大于开始日期最大值!'))
            return false
        }
        if (currSettingItemData.enddate && currSettingItemData.enddate1 && currSettingItemData.enddate > currSettingItemData.enddate1) {
            message.warning(getLabel(508670, '结束日期最小值不能大于结束日期最大值!'))
            return false
        }
        if (currSettingItemData.begindate && currSettingItemData.enddate1 && currSettingItemData.begindate > currSettingItemData.enddate1) {
            message.warning(getLabel(508673, '开始日期最小值不能大于结束日期最大值!'))
            return false
        }
        return true
    }

    onDialogSureClick = () => {
        const { currSettingItemData } = this.state

        if (!this.crossValidate()) {
            return
        }

        if (this.state.letDialogVisiable.add || this.state.letDialogVisiable.othersave) {
            this.setState({
                dialogVisible: false,
                tableDatas: [
                    ...this.state.tableDatas,
                    Object.assign({ subtype: "1" }, currSettingItemData, {
                        id: this.state.tableDatas.length
                    })
                ]
            })
        } else if (this.state.letDialogVisiable.set) {
            this.state.tableDatas[this.state.currSettingItemData.id] = Object.assign({ subtype: "1" }, this.state.currSettingItemData);
            this.setState({
                dialogVisible: false,
                tableDatas: this.state.tableDatas
            })
        }
    }

    onDialogCancleClick = () => {
        this.setState({
            dialogVisible: false
        })
    }

    onAddBtnClick = () => {
        this.setState({
            dialogVisible: true,
            letDialogVisiable: {
                add: true
            },
            currSettingItemData: Object.assign({}, toJS(this.props.TaskElementStore.defaultCurrSettingItemData))
        })
    }

    onDelBtnClick = (datas, keys) => {
        keys.sort((a, b) => {
            return b - a
        }).forEach((d, i) => {
            this.state.tableDatas.splice(d, 1)
        })

        // 重新设置数据主键
        this.state.tableDatas.map((item, index) => {
            item.id = index;
        })

        this.setState({
            tableDatas: this.state.tableDatas
        })
    }

    onGroupbyIconClick = () => {
        let selectedKeys = []
        let orderby = this.state.currSettingItemData.orderby || ""

        this.state.currSettingItemData.orderbyTransferDatas.forEach((d, i) => {
            d.orderType = ""
        })

        orderby.split(",").forEach((d, i) => {
            this.state.currSettingItemData.orderbyTransferDatas.forEach((dd, ii) => {
                if (d.indexOf(dd.name) != -1) {
                    dd.orderType = d.split("-")[1]
                    selectedKeys.push(dd.id)
                }
            })
        })

        this.state.currSettingItemData.orderbyTransferSelectedKeys = selectedKeys

        this.setState({
            orderbyTransferDialogVisible: true,
            currSettingItemData: this.state.currSettingItemData
        })
    }

    onFieldshowIconClick = () => {
        let selectedKeys = []
        let fieldshow = this.state.currSettingItemData.fieldshow || ""

        fieldshow.split(",").forEach((d, i) => {
            this.state.currSettingItemData.fieldshowTransferDatas.forEach((dd, ii) => {
                if (d.indexOf(dd.fieldname) != -1) {
                    selectedKeys.push(dd.id)
                }
            })
        })

        this.state.currSettingItemData.fieldshowTransferSelectedKeys = selectedKeys

        this.setState({
            fieldshowTransferDialogVisible: true,
            currSettingItemData: this.state.currSettingItemData
        })
    }

    onDataSequenceChange = (datas, other) => {
        datas.map((item, index) => {
            item.id = index;
        })

        this.setState({
            tableDatas: datas
        })
    }

    onOrderbyTransferDialogSureClick = () => {
        const { orderbyTransferDatas, orderbyTransferSelectedKeys } = this.state.currSettingItemData
        let orderby = ""

        orderbyTransferSelectedKeys && orderbyTransferSelectedKeys.forEach((d, i) => {
            orderbyTransferDatas.forEach((dd, ii) => {
                if (d == dd.id) {
                    orderby += (dd.name + "-" + dd.orderType + ",")
                }
            })
        })

        if (orderby != "") {
            this.state.currSettingItemData.orderby = orderby.substring(0, orderby.length - 1)
        } else {
            this.state.currSettingItemData.orderby = ""
        }

        this.setState({
            orderbyTransferDialogVisible: false,
            currSettingItemData: this.state.currSettingItemData
        })
    }

    onFieldshowTransferDialogSureClick = () => {
        const { fieldshowTransferDatas, fieldshowTransferSelectedKeys } = this.state.currSettingItemData
        let fieldshow = ""

        fieldshowTransferSelectedKeys && fieldshowTransferSelectedKeys.forEach((d, i) => {
            fieldshowTransferDatas.forEach((dd, ii) => {
                if (d == dd.id) {
                    fieldshow += (dd.fieldname + ",")
                }
            })
        })

        if (fieldshow != "") {
            this.state.currSettingItemData.fieldshow = fieldshow.substring(0, fieldshow.length - 1)
        } else {
            this.state.currSettingItemData.fieldshow = ""
        }

        this.setState({
            fieldshowTransferDialogVisible: false,
            currSettingItemData: this.state.currSettingItemData
        })
    }

    getFieldshowText = (fieldshow) => {
        const { currSettingItemData } = this.state
        let fieldshowText = ""
        fieldshow = fieldshow || ""
        let fieldshowArr = fieldshow.split(",")
        fieldshowArr.forEach((fs, fi) => {
            currSettingItemData.fieldshowTransferDatas.forEach((d, i) => {
                if (d.fieldname == fs) {
                    fieldshowText += (d.name + ",")
                }
            })
        })
        return fieldshowText.length > 0 ? fieldshowText.substring(0, fieldshowText.length - 1) : fieldshowText
    }

    render() {
        const { tableDatas, columns, title, dialogVisible, orderbyTransferDialogVisible, fieldshowTransferDialogVisible, currSettingItemData, isshowstatus } = this.state
        const { TaskElementStore } = this.props

        // dialog内容的设置
        let dialogContent = (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@quwi42`} title={getLabel(82751, "基础设置")} showGroup={true}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ralkrt`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@67ehlt`}
                            style={{ marginLeft: 30 }}
                            label={getLabel(508544, "标题")}
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ position: "relative", width: "100%" }}>
                                <div style={{ width: "90%", height: "100%", display: "inline-block", verticalAlign: "middle" }}>
                                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@9ymz1z`}
                                        viewAttr={3}
                                        value={currSettingItemData.title}
                                        onChange={(value) => {
                                            currSettingItemData.title = value
                                            this.setState({
                                                currSettingItemData
                                            })
                                        }}
                                    />
                                </div>
                            </div>
                        </WeaFormItem>
                    </Row>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@uhn0pb`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gg1e7j`}
                            style={{ marginLeft: 30 }}
                            label={getLabel('19493','显示条数') }
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ position: "relative", width: "100%" }}>
                                <div style={{ width: "40%", height: "100%", display: "inline-block", verticalAlign: "middle" }}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@4dunu2`}
                                        value={currSettingItemData.pagesize}
                                        onChange={value => {
                                            currSettingItemData.pagesize = value
                                            this.setState({
                                                currSettingItemData
                                            })
                                        }}
                                        min={1}
                                        max={10}
                                    />
                                </div>
                            </div>
                        </WeaFormItem>
                    </Row>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@40vjmq`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@if5sf4`}
                            style={{ marginLeft: 30 }}
                            label={getLabel('517579','分页显示')  }
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ paddingTop: "6px" }}>
                                <Switch ecId={`${this && this.props && this.props.ecId || ''}_Switch@mji45j`}
                                    size={"small"}
                                    checked={currSettingItemData.paginate == 1}
                                    onChange={(value) => {
                                        currSettingItemData.paginate = value ? 1 : 0
                                        this.setState({
                                            currSettingItemData
                                        })
                                    }}
                                />
                            </div>
                        </WeaFormItem>
                    </Row>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6f3i6t`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vtboqg`}
                            style={{ marginLeft: 30 }}
                            label={getLabel('517580','显示字段')  }
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ paddingTop: "7px" }}>
                                <i className="icon-coms-Flow-setting icon-coms-Flow-setting-hover-workrelate"
                                    onClick={this.onFieldshowIconClick}
                                />
                                <span style={{ paddingLeft: "6px" }}>{this.getFieldshowText(currSettingItemData.fieldshow)}</span>
                            </div>
                        </WeaFormItem>
                    </Row>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@a83wlf`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@03d3li`}
                            style={{ marginLeft: 30 }}
                            label={getLabel(15512, "排序字段")}
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ paddingTop: "7px" }}>
                                <i className="icon-coms-Flow-setting icon-coms-Flow-setting-hover-workrelate"
                                    onClick={this.onGroupbyIconClick}
                                />
                                <span style={{ paddingLeft: "6px" }}>{currSettingItemData.orderby}</span>
                            </div>
                        </WeaFormItem>
                    </Row>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9epi6u`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2qmp47`}
                            style={{ marginLeft: 30 }}
                            label={getLabel(128851, "显示总数")}
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ paddingTop: "6px" }}>
                                <Switch ecId={`${this && this.props && this.props.ecId || ''}_Switch@5vizxc`}
                                    size={"small"}
                                    checked={currSettingItemData.showTotalCount == 1}
                                    onChange={(value) => {
                                        currSettingItemData.showTotalCount = value ? 1 : 0
                                        this.setState({
                                            currSettingItemData
                                        })
                                    }}
                                />
                            </div>
                        </WeaFormItem>
                    </Row>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qvn1um`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@f5ajsv`}
                            style={{ marginLeft: 30 }}
                            label={getLabel('517603','显示方式') }
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ position: "relative", width: "100%" }}>
                                <div style={{ width: "90%", height: "100%", display: "inline-block", verticalAlign: "middle" }}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@cqkwtx`}
                                        options={TaskElementStore.displayTypeOptions}
                                        viewAttr={2}
                                        value={currSettingItemData.displayType}
                                        onChange={(v) => {
                                            currSettingItemData.displayType = v
                                            this.setState({
                                                currSettingItemData
                                            })
                                        }}
                                    />
                                </div>
                            </div>
                        </WeaFormItem>
                    </Row>
                    {
                        currSettingItemData.displayType == "1" &&
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@j0fy1d`}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@e5ppfk`}
                                style={{ marginLeft: 30 }}
                                label={getLabel('517598','显示表头')  }
                                labelCol={{ span: 6 }}
                                wrapperCol={{ span: 18 }}>
                                <div style={{ paddingTop: "6px" }}>
                                    <Switch ecId={`${this && this.props && this.props.ecId || ''}_Switch@c5i0vj`}
                                        size={"small"}
                                        checked={currSettingItemData.showTableHeader == 1}
                                        onChange={(value) => {
                                            currSettingItemData.showTableHeader = value ? 1 : 0
                                            this.setState({
                                                currSettingItemData
                                            })
                                        }}
                                    />
                                </div>
                            </WeaFormItem>
                        </Row>
                    }
                    {
                        currSettingItemData.displayType == "4" &&
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ejlinh`}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@p1hvgu`}
                                style={{ marginLeft: 30 }}
                                label={getLabel('517597','显示头像')  }
                                labelCol={{ span: 6 }}
                                wrapperCol={{ span: 18 }}>
                                <div style={{ paddingTop: "6px" }}>
                                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@za1sjx`}
                                        value={currSettingItemData.showAvator}
                                        onChange={e => {
                                            currSettingItemData.showAvator = e.target.value
                                            this.setState({
                                                currSettingItemData
                                            })
                                        }}
                                    >
                                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@tqdp3z`} key="principal" value="principal" >{getLabel(16936, '责任人')}</Radio>
                                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@h6z8k1`} key="creater" value="creater" >{getLabel(882, '创建人')}</Radio>
                                    </RadioGroup>
                                </div>
                            </WeaFormItem>
                        </Row>
                    }
                    {
                        currSettingItemData.condtype == "9" &&
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yx5xk7`}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@nja4y2`}
                                style={{ marginLeft: 30 }}
                                label={getLabel(515500, "下属人员搜索")}
                                labelCol={{ span: 6 }}
                                wrapperCol={{ span: 18 }}>
                                <div style={{ paddingTop: "6px" }}>
                                    <Switch ecId={`${this && this.props && this.props.ecId || ''}_Switch@ruyr04`}
                                        size={"small"}
                                        checked={currSettingItemData.showSubordinateFilter == 1}
                                        onChange={(value) => {
                                            currSettingItemData.showSubordinateFilter = value ? 1 : 0
                                            this.setState({
                                                currSettingItemData
                                            })
                                        }}
                                    />
                                </div>
                            </WeaFormItem>
                        </Row>
                    }
                </WeaSearchGroup>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@1dzy0f`} title={getLabel(127253, "来源设置")} showGroup={true}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@oigsmz`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sw01x7`}
                            style={{ marginLeft: 30 }}
                            label={getLabel(500401, "类型")}
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ position: "relative", width: "100%" }}>
                                <div style={{ width: "90%", height: "100%", display: "inline-block", verticalAlign: "middle" }}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@53pvqy`}
                                        options={TaskElementStore.condtypeOptions}
                                        viewAttr={2}
                                        value={currSettingItemData.condtype}
                                        onChange={(v) => {
                                            currSettingItemData.condtype = v;
                                            let _isshowstatus = true;
                                            if (v == 7) {
                                                _isshowstatus = false;
                                            }
                                            this.setState({
                                                currSettingItemData, isshowstatus: _isshowstatus
                                            })
                                        }}
                                    />
                                </div>
                            </div>
                        </WeaFormItem>
                    </Row>

                    {
                        currSettingItemData.condtype == "9" &&
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wxmnee`}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@07wbxy`}
                                style={{ marginLeft: 30 }}
                                label={getLabel(515501, "下属类型")}
                                labelCol={{ span: 6 }}
                                wrapperCol={{ span: 18 }}>
                                <div style={{ position: "relative", width: "100%" }}>
                                    <div style={{ width: "90%", height: "100%", display: "inline-block", verticalAlign: "middle" }}>
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@cpwgvt`}
                                            options={TaskElementStore.subordinateTypeOptions}
                                            viewAttr={2}
                                            value={currSettingItemData.subtype || "1"}
                                            onChange={(v) => {
                                                currSettingItemData.subtype = v
                                                this.setState({
                                                    currSettingItemData
                                                })
                                            }}
                                        />
                                    </div>
                                </div>
                            </WeaFormItem>
                        </Row>
                    }

                    {isshowstatus && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@atlqah`}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@mgfbny`}
                            style={{ marginLeft: 30 }}
                            label={getLabel(23247, "状态")}
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <div style={{ width: "90%", height: "100%", display: "inline-block", verticalAlign: "middle" }}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@27m9xc`}
                                    options={TaskElementStore.statusOptions}
                                    viewAttr={2}
                                    value={currSettingItemData.status}
                                    onChange={(v) => {
                                        currSettingItemData.status = v
                                    }}
                                >
                                </WeaSelect>
                            </div>
                        </WeaFormItem>
                    </Row>}
                    {
                        this.state.searchItems.sort((t1, t2) => {
                            return t1.sequence - t2.sequence
                        }).map((d, i) => {
                            return (
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hakmfz@${i}`}>
                                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@at7ojx@${i}`}
                                        style={{ marginLeft: 30 }}
                                        label={getLabel(parseInt(d.languageid), d.name)}
                                        labelCol={{ span: 6 }}
                                        wrapperCol={{ span: 18 }}>
                                        <div style={{ width: "90%", height: "100%", display: "inline-block", verticalAlign: "middle" }}>
                                            {
                                                d.type == 1 &&
                                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@wuoiud@${d.columninfo}`}
                                                    viewAttr={"2"}
                                                    value={currSettingItemData[d.columninfo]}
                                                    onBlur={(value) => {
                                                        currSettingItemData[d.columninfo] = value
                                                    }}
                                                />
                                            }
                                            {
                                                d.type == 2 &&
                                                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@hs8lc8@${d.columninfo}`}
                                                    type={d.browstype}
                                                    multiple={d.browssingle == 0}
                                                    replaceDatas={d.columnarray && currSettingItemData[d.columnarray] ? JSON.parse(toJS(currSettingItemData[d.columnarray])) : []}
                                                    onChange={(ids, names, datas) => {
                                                        ids = ids ? ids : ""
                                                        names = names ? names : ""
                                                        currSettingItemData[d.columninfo] = ids
                                                        if (d.columnarray) {
                                                            let replaceDatas = []
                                                            let idsArr = ids.split(",")
                                                            let namesArr = names.split(",")
                                                            idsArr.forEach((id, di) => {
                                                                replaceDatas.push({
                                                                    id: id,
                                                                    name: namesArr[di]
                                                                })
                                                            })
                                                            currSettingItemData[d.columnarray] = JSON.stringify(replaceDatas)
                                                        }
                                                    }}
                                                />
                                            }
                                            {
                                                d.type == 3 &&
                                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2738wz@${d.columninfo}`}
                                                    options={d.columnarray ? TaskElementStore[d.columnarray] : [""]}
                                                    viewAttr={2}
                                                    value={currSettingItemData[d.columninfo]}
                                                    onChange={(v) => {
                                                        currSettingItemData[d.columninfo] = v
                                                    }}
                                                >
                                                </WeaSelect>
                                            }
                                            {
                                                d.type == 4 ? (
                                                    d.columninfo == 'begindate' || d.columninfo == 'enddate' ?
                                                        <div>
                                                            <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@ewzqil@${d.columninfo}`}
                                                                value={currSettingItemData[d.columninfo]}
                                                                viewAttr={2}
                                                                style={{
                                                                    width: "45%"
                                                                }}
                                                                onChange={(value) => {
                                                                    currSettingItemData[d.columninfo] = value
                                                                }}
                                                            />
                                                            <span style={{ display: "inline-block", width: "10%", textAlign: "center" }}>--</span>
                                                            <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@6nctos@${d.columninfo}`}
                                                                value={currSettingItemData[d.columninfo + "1"]}
                                                                viewAttr={2}
                                                                style={{
                                                                    width: "45%"
                                                                }}
                                                                onChange={(value) => {
                                                                    currSettingItemData[d.columninfo + "1"] = value
                                                                }}
                                                            />
                                                        </div>
                                                        :
                                                        <div>
                                                            <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@c1bc1o@${d.columninfo}`}
                                                                value={currSettingItemData[d.columninfo]}
                                                                viewAttr={2}
                                                                style={{
                                                                    width: "45%"
                                                                }}
                                                                onChange={(value) => {
                                                                    currSettingItemData[d.columninfo] = value
                                                                }}
                                                            />
                                                        </div>
                                                ) : ""
                                            }
                                            {
                                                d.type == 5 &&
                                                <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@9is8a5@${d.columninfo}`}
                                                    value={currSettingItemData[d.columninfo]}
                                                    viewAttr={"2"}
                                                    onBlur={value => currSettingItemData[d.columninfo] = value}
                                                />
                                            }
                                            {
                                                d.type == 7 &&
                                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@73vcgr@${d.columninfo}`}
                                                    value={currSettingItemData[d.columninfo]}
                                                    viewAttr={"2"}
                                                    display="switch"
                                                    id={d.columninfo}
                                                    style={{ display: 'inline' }}
                                                    onChange={(value) => currSettingItemData[d.columninfo] = value}
                                                />
                                            }
                                        </div>
                                    </WeaFormItem>
                                </Row>
                            )
                        })
                    }
                </WeaSearchGroup>
            </div>
        )

        // 排序Dialog内容的设置
        let orderbyTransferDialogContent = (
            <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@iv6a2m`}
                data={currSettingItemData.orderbyTransferDatas}
                height={300}
                selectedKeys={
                    currSettingItemData.orderbyTransferSelectedKeys
                }
                onChange={(keys, datas) => {
                    currSettingItemData.orderbyTransferDatas.forEach((d, i) => {
                        if (keys.join(",").indexOf(d.id + "") == -1) {
                            d.orderType = "";
                        } else {
                            if (d.orderType == "") {
                                d.orderType = getLabel(384984, "降序")
                            }
                        }
                    })
                    currSettingItemData.orderbyTransferSelectedKeys = keys
                    this.setState({
                        currSettingItemData
                    })
                }}
                renderItem={(item) => {
                    return (
                        <div style={{ height: 37, lineHeight: "37px", borderBottom: "1px solid rgb(226,226,226)", position: "relative" }}>
                            <span style={{ paddingLeft: "10px", display: "inline-block" }}>{item.name}</span>
                            <span
                                style={{ position: "absolute", top: "0px", right: "10px", display: "inline-block" }}
                                onClick={(e) => {
                                    e.preventDefault()
                                    e.stopPropagation()
                                    currSettingItemData.orderbyTransferDatas.forEach((d, i) => {
                                        if (d.id == item.id) {
                                            d.orderType = (item.orderType == getLabel(384985, "升序") ? getLabel(384984, "降序") : getLabel(384985, "升序"))
                                        }
                                    })
                                    this.setState({
                                        currSettingItemData
                                    })
                                }
                                }
                            >
                                {item.orderType}
                            </span>
                        </div>
                    )
                }}
            />
        )

        let fieldshowTransferDialogContent = (
            <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@l2th4v`}
                data={currSettingItemData.fieldshowTransferDatas}
                height={300}
                selectedKeys={
                    currSettingItemData.fieldshowTransferSelectedKeys
                }
                onChange={(keys, datas) => {
                    currSettingItemData.fieldshowTransferSelectedKeys = keys
                    this.setState({
                        currSettingItemData
                    })
                }}
            />
        )

        return (
            <div className="portal-task-element-setting">
                <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@16ssd5`}
                    rowKey={"id"}
                    datas={tableDatas}
                    title={title}
                    draggable={true}
                    columns={columns}
                    showCopy={false}
                    willAdd={this.onAddBtnClick}
                    willDelete={this.onDelBtnClick}
                    onChange={this.onDataSequenceChange}
                />
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@92naxc`}
                    className="portal-task-element-setting-dialog"
                    hasScroll={true}
                    visible={dialogVisible}
                    title={getLabel(506919, "内容设置")}
                    buttons={
                        [
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qseo7g@sure`} type="primary" onClick={this.onDialogSureClick}>
                                {getLabel(826, '确定')}
                            </Button>,
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fw8sgp@cancel`} type="ghost" onClick={this.onDialogCancleClick}>
                                {getLabel(31129, '取消')}
                            </Button>
                        ]
                    }
                    onCancel={() => { this.setState({ dialogVisible: false }) }}
                    children={dialogContent}
                />
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@5invhe`}
                    style={{ width: 600, height: 300 }}
                    visible={orderbyTransferDialogVisible}
                    title={getLabel(386541, '排序字段设置')}
                    buttons={
                        [
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9qx09a@sure`} type="primary" onClick={this.onOrderbyTransferDialogSureClick}>
                                {getLabel(826, '确定')}
                            </Button>,
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@twjwro@cancel`} type="ghost" onClick={() => this.setState({ orderbyTransferDialogVisible: false })}>
                                {getLabel(31129, "取消")}
                            </Button>
                        ]
                    }
                    onCancel={() => { this.setState({ orderbyTransferDialogVisible: false }) }}
                    children={orderbyTransferDialogContent}
                />
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@386vbk`}
                    style={{ width: 600, height: 300 }}
                    visible={fieldshowTransferDialogVisible}
                    title={getLabel('517604','显示字段设置') }
                    buttons={
                        [
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8risly@sure`} type="primary" onClick={this.onFieldshowTransferDialogSureClick}>
                                {getLabel(826, '确定')}
                            </Button>,
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ibtviv@cancel`} type="ghost" onClick={() => this.setState({ fieldshowTransferDialogVisible: false })}>
                                {getLabel(31129, "取消")}
                            </Button>
                        ]
                    }
                    onCancel={() => { this.setState({ fieldshowTransferDialogVisible: false }) }}
                    children={fieldshowTransferDialogContent}
                />
            </div>
            // <div style={{width: '100%'}}>
            //     <WeaSearchGroup title={getLabel('386578','未读列表') } col={1} showGroup={true} needTigger={true} items={[]} center={true}>
            //         <WeaFormItem
            //             label={getLabel('19493','显示条数') }
            //             labelCol={{span: 6}}
            //             wrapperCol={{span: 16}} 
            //         >
            //             <WeaInput value={5} style={{width: 130}} onChange={v => this.setState({eContentShowNum: v})}/>
            //         </WeaFormItem>
            //         <WeaFormItem
            //             label={getLabel('19494','链接方式') }
            //             labelCol={{span: 6}}
            //             wrapperCol={{span: 16}}
            //         >
            //             <WeaSelect
            //             options={[
            //                 {
            //                     key: "1",
            //                     selected: false,
            //                     showname: getLabel('19497','当前页') 
            //                 },{
            //                     key: "2",
            //                     selected: true,
            //                     showname: getLabel('19498','弹出页') 
            //                 }
            //             ]}
            //             value={-1}
            //             detailtype={3}
            //             onChange={(v)=>{
            //                 this.setState({eContentLinkMode:v})
            //             }}
            //             />
            //         </WeaFormItem>
            //     </WeaSearchGroup>
            //     <WeaSearchGroup title={getLabel('24960','提示信息') } col={1} showGroup={true} center={true} needTigger={true} items={[]}>
            //         <WeaFormItem
            //             label={getLabel('386577','显示提示信息') }
            //             labelCol={{span: 6}}
            //             wrapperCol={{span: 16}}
            //         >
            //             <WeaCheckbox value={1} onChange={v => this.setState({showHelpfulTip: v})}/>
            //         </WeaFormItem>
            //     </WeaSearchGroup>
            // </div>
        );
    }

    onSave = () => {
        // 保存元素设置数据
        // 如果有必填项，校验不通过时，需要return false;
        const { params = {} } = this.props;
        const { eid } = params;
        let { tableDatas } = this.state;

        WeaTools.callApi('/api/workrelate/portal/element/saveSettingData', 'POST', {
            tableDatas: JSON.stringify(tableDatas.map((d, i) => {
                d.orderbyTransferDatas = ""
                d.fieldshowTransferDatas = ""
                if (d.condtype != "9") {
                    d.showSubordinateFilter = 0
                    d.subtype = ""
                }
                if (d.displayType != "1") {
                    d.showTableHeader = "0"
                }
                if (d.displayType != "4") {
                    d.showAvator = "principal"
                }
                return d
            })),
            eid
        });
    }
}

export default Setting;
